<!-- 我的名片 -->
<template>
	<view class="business-card" v-if="init">
		<view class="u-page">
			<!-- 所有内容的容器 -->
			<view v-if="current === 0 ? true : false"><card-details ref="modulePageRef" /></view>
			<view v-else-if="current == 1 ? true : false"><card-editor @initLogin="initLogin" @tabbarChange="editOrAdd" ref="modulePageRef" /></view>
			<view v-else-if="current == 2 ? true : false"><card-collection ref="modulePageRef" /></view>
			<view v-else-if="current == 3 ? true : false"><card-attention ref="modulePageRef" /></view>
		</view>
	
		<!-- 别人分享给我的，且自己还没有名片 -->
		<block v-if="shareCardId && !(vuex_user.card_id && vuex_user.card_id > 0)">
			<view class="tabbar-line"></view>
			<view class="tabbar">
				<view class="tabbar_item" v-for="(item, index) in shareList" :key="index" @click="shareTabClick(item)">
					<u-icon v-if="item.selectedIconPath ? true : false" name="coupon" size="32" :color="index == 1 ? '#00A6F8' : ''"></u-icon>
					<view v-else :class="['icon_sign', 'iconfont', item.icon]" :color="index == 1 ? '#00A6F8' : ''"></view>
					<view class="tabbar-name" :style="{ color: index == 1 ? '#00A6F8' : '' }">{{ item.text }}</view>
				</view>
			</view>
		</block>
		<!-- 其他情况 -->
		<block v-else>
			<view class="tabbar-line"></view>
			<view class="tabbar">
				<view class="tabbar_item" v-for="(item, index) in list" :key="index" @click="tabbarChange(index)">
					<u-icon v-if="item.selectedIconPath ? true : false" :name="item.selectedIconPath" size="32" :color="index == current ? '#00A6F8' : ''"></u-icon>
					<view v-else :class="['icon_sign', 'iconfont', item.icon]" :color="index == current ? '#00A6F8' : ''"></view>
					<view class="tabbar-name" :style="{ color: index == current ? '#00A6F8' : '' }">{{ item.text }}</view>
				</view>
			</view>
		</block>

		<!-- </block> -->
		<sww-login></sww-login>
	</view>
</template>

<script>
import { pageShare } from '@/mixins/pageShare.js';
import { uniToast } from '@/utils/uniPromise.js';
import { mapState } from 'vuex';
import CardAttention from './card-item/card-attention';
import CardCollection from './card-item/card-collection';
import CardDetails from './card-item/card-details';
import CardEditor from './card-item/card-editor';
export default {
	components: {
		CardAttention,
		CardCollection,
		CardDetails,
		CardEditor,
	},
	mixins: [pageShare],
	data() {
		return {
			init:false,
			shareCardId: null, // 别人分享过来的名片id
			shareList: [
				{
					text: '名片',
					selectedIconPath: 'home',
					method:'goShareCard'
				},
				{
					text: '创建名片',
					selectedIconPath: 'edit-pen',
				},
				{
					text: '返回首页',
					icon: 'iconfont-e61f',
					url:'index',
				}
			],
			list: [
				{
					selectedIconPath: 'coupon',
					text: '名片'
				},
				{
					selectedIconPath: 'edit-pen',
					text: '编辑'
				},
				{
					selectedIconPath: 'heart',
					text: '收藏'
				},
				{
					selectedIconPath: 'star',
					text: '浏览'
				},
				{
					icon: 'iconfont-e61f',
					text: '首页'
				}
			],
			current: 10,
			Info:{},
			hasSetImgUrl: false // pageShare分享使用的
		};
	},
	onLoad() {
	
		// 查看是否有别人的分享卡片id
		var value = uni.getStorageSync('shareCard_id')
		if(value && value !== this.vuex_user.card_id){
			this.shareCardId = Number(value)
		}else{
			this.shareCardId = null
			uni.removeStorageSync('shareCard_id')
		}
		this.init = true
		// 进这个页面前要先登录
		if (this.vuex_user.card_id && this.vuex_user.card_id > 0) {
			this.current = 0;
		} else {
			this.current = 1;
		}
	},
	onShow() {               
		this.customShareParams();
		
		// #ifdef  MP-WEIXIN
		wx.hideHomeButton();
		// #endif
	},
	onShareAppMessage() {
		return this.getShareAppMessage();
	},
	// onShareTimeline: function() {
	// 	return this.getShareTimeline();
	// },
	onPageScroll: function(scroll) {
		try {
			if (this.$refs.modulePageRef.$onPageScroll) {
				this.$refs.modulePageRef.$onPageScroll(scroll)
			}
		} catch (e) {
	
		}
	},
	onReachBottom: function() {
		try {
			if (this.$refs.modulePageRef.$onReachBottom) {
				this.$refs.modulePageRef.$onReachBottom()
			}
		} catch (e) {
	
		}
	},
	methods: {
		shareTabClick (item) {
			if(item.method){
				this[item.method]()
			}else if(item.url){
				this.$linkTo(item.url)
			}
		},
		goShareCard () {
			this.$linkTo(`/package/business-card/share-card/index?id=${this.shareCardId}&noShare=${1}`)
		},
		// 切换tabBar
		tabbarChange(index) {
			if (index == 4) {
				this.$linkTo('index');
				return;
			}
			if (!this.vuex_user.card_id || this.vuex_user.card_id <= 0) {
				uniToast('请先创建名片');
				this.current = 1;
				return;
			}
			this.current = index;
		},
		// 登录后判断需要的底部栏
		initLogin () {
			if(this.shareCardId){
				if(this.vuex_user.card_id && this.vuex_user.card_id > 0){
					this.shareCardId = null
					uni.removeStorageSync('shareCard_id')
				}
			}
		},
		// 编辑
		editOrAdd(index) {
			if(this.shareCardId){
				this.shareCardId = null
				uni.removeStorageSync('shareCard_id')
			}
			this.current = index;
			this.customShareParams();
		},
		customShareParams() {
			let path = '/pages/index/index';
			let title = '查看我的名片';
			if(this.vuex_user.card_id && this.vuex_user.card_id > 0){
				path = `/package/business-card/share-card/index?id=${this.vuex_user.card_id}`;
				title = `${this.vuex_user.nickname}的名片，推荐看看`;
			}
			this.shareParams.title = title;
			this.shareParams.path = path;
			this.$nextTick(() => {
				this.onShareByH5();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .u-tabbar__content__item__text {
	font-size: 20rpx;
}

.tabbar-line {
	height: 150rpx;
	width: 100%;
	background-color: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.tabbar {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	position: fixed;
	height: 100rpx;
	padding: 16rpx 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 120;
	border-top: 1px solid #f5f5f5;
	.tabbar_item {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.icon_sign {
			font-size: 30rpx;
		}
		.tabbar-name {
			font-size: 22rpx;
		}
	}
}
</style>
